<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>

  <body>
    <!-- 测试用例 -->
    <div id="app">
      <div>{{ msg }}</div>
      <div>{{ msg }}</div>
      <div>{{ msg }}</div>
      <div>{{ formatMsg }}</div>
      <div>{{ formatMsg }}</div>
      <div>{{ formatMsg }}</div>
      {{ obj.a }}
    </div>
    <script src="../dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          console.log(this)
          return {
            msg: 'hello vue',
            aa: '11',
            obj: {
              a: 1,
              b: 2
            },
            arr: [
              {
                name: '张三'
              },
              1
            ]
          }
        },
        methods: {},
        watch: {
          // msg(newV, oldV) {
          //   console.log(newV, oldV)
          // }
        },
        computed: {
          formatMsg() {
            console.log(123)
            return this.msg + this.aa
          }
        },
        components: {}
      })
      console.log(vm.formatMsg)
      console.log(vm.formatMsg)
      // setTimeout(() => {
      //   vm.msg = 123
      // }, 500)
    </script>
  </body>
</html>
